<!--
 * @Description: 新建、编辑端口镜像
 * @Author: 0001101008/HuYuxi
 * @Date: 2021-09-28 14:59:18
 * @LastEditTime: 2021-11-08 15:44:21
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <el-dialog
    :title="dialogTitle"
    :close-on-click-modal="false"
    width="500px"
    :visible.sync="dialogStatus"
    @close="cancel"
  >
    <el-form ref="portForm" :model="form" :rules="rules" label-width="100px" label-position="right">
      <!-- 配置名称 -->
      <el-form-item label="镜像会话" prop="session">
        <el-input-number
          v-model="form.session"
          :min="1"
          :max="64"
          :disabled="form.id ? true: false"
        ></el-input-number>
      </el-form-item>
      <!-- 镜像端口 -->
      <el-form-item label="镜像端口" prop="portOid">
        <el-select
          v-model="form.portOid"
          style="width:100%;"
          :disabled="form.id ? true: false"
          @change="changePortOid"
        >
          <el-option
            v-for="(item, index) in portList"
            :key="index"
            :value="item.oid"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 被镜像端口 -->
      <el-form-item label="被镜像端口" prop="mirroredPortOid">
        <el-select
          v-model="form.mirroredPortOid"
          style="width:100%;"
          :disabled="form.id ? true: false"
          @change="changePortOided"
        >
          <el-option
            v-for="(item, index) in portList"
            :key="index"
            :value="item.oid"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 方向 -->
      <el-form-item label="方向" prop="direction">
        <el-select v-model="form.direction" style="width:100%;">
          <el-option value="RX" label="收镜像"></el-option>
          <el-option value="TX" label="发镜像"></el-option>
          <!-- <el-option value="BOTH" label="双向"></el-option> -->
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="onSubmit">确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ['ne', 'type', 'dialogStatus', 'portInfo', 'portList'],
  data () {
    return {
      dialogTitle: '新建端口镜像',
      form: {
        id: null,
        session: null,
        portOid: null,
        mirroredPortOid: null,
        direction: null
      },
      rules: {
        session: [{
          required: true,
          message: '请填写镜像会话',
          trigger: 'change'
        }],
        portOid: [{
          required: true,
          message: '请选择接口',
          trigger: 'change'
        }],
        mirroredPortOid: [{
          required: true,
          message: '请选择接口',
          trigger: 'change'
        }],
        direction: [{
          required: true,
          message: '请选择方向',
          trigger: 'change'
        }]
      },
      mirroredPortType: null,
      mirrorPortType: null,
    };
  },
  watch: {
    type: {
      immediate: true,
      handler (val) {
        let _this = this;
        if (val === 'create') {
          _this.dialogTitle = '新建端口镜像';
          _this.form = {
            id: null,
            session: null,
            portOid: null,
            mirroredPortOid: null,
            direction: null
          };
        }
      }
    }
  },
  methods: {
    // 取消
    cancel () {
      let _this = this;
      _this.$refs['portForm'].resetFields();
      _this.$emit('handleDialog', false);
      _this.clearData();
    },
    // 清空数据
    clearData () {
      let _this = this;
      _this.form = {
        id: null,
        session: null,
        portOid: null,
        mirroredPortOid: null,
        direction: null
      };
    },
    // 选择镜像端口
    changePortOid (val) {
      let _this = this;
      if (val === _this.form.mirroredPortOid) {
        _this.$message.error('不允许选择相同的镜像');
        _this.form.portOid = null;
      }
      if (_this.form.portOid) {
        let o = _this.portList.find(item => item.oid === _this.form.portOid);
        let name = o.name;
        if (name.indexOf('GEI') > -1) {
          _this.mirrorPortType = 'Interface';
        }
        if (name.indexOf('GRE_TUNNEL') > -1) {
          _this.mirrorPortType = 'GRE';
        }
      }
    },
    // 选择被镜像端口
    changePortOided (val) {
      let _this = this;
      if (val === _this.form.portOid) {
        _this.$message.error('不允许选择相同的镜像');
        _this.form.mirroredPortOid = null;
      }
      if (_this.form.mirroredPortOid) {
        let o = _this.portList.find(item => item.oid === _this.form.mirroredPortOid);
        let name = o.name;
        if (name.indexOf('GEI') > -1) {
          _this.mirroredPortType = 'Interface';
        }
        if (name.indexOf('GRE_TUNNEL') > -1) {
          _this.mirroredPortType = 'GRE';
        }
      }
    },
    // 确认
    onSubmit () {
      let _this = this;
      _this.$refs['portForm'].validate((valid) => {
        if (valid) {
          let params = {
            session: _this.form.session,
            mirrorPortOid: _this.form.portOid,
            mirrorPortType: _this.mirrorPortType, // 'gre/ interface',
            mirror: [{
              direction: _this.form.direction,
              mirroredPortOid: _this.form.mirroredPortOid,
              mirroredPortType: _this.mirroredPortType
            }]
          };
          let paras = _this.form.id ? { updates: [params] } : { adds: [params] };
          _this.$http.post({
            url: '/api/resource/nemng/command/' + _this.ne.id,
            data: {
              commandCode: 'maintenance.portflowmirror.set',
              paras: paras
            }
          }).then(res => {
            if (res) {
              _this.$message.success(_this.form.id ? '更新成功！' : '创建成功！');
              _this.$emit('handleDialog', false);
              _this.clearData();
              _this.$parent.refresh();
            }
          });
        } else {
          _this.$message.error('请检查必填项！');
        }
      });
    }
  }
};
</script>